<script lang="tsx">
/**
 * 项目开发管理
 */
export default {
  name: "develop-project-department"
}
</script>

<script setup lang="tsx">



import {ref} from "vue";
import {convertEnumToList, definePageModel, PageModel,processRequest} from "@/framework";
import DevelopmentDetail from "@/pages/develop-project/develop-project-development/components/development-detail/index.vue";
import {DevelopStatusEnum} from "@/pages/develop-project/develop-project-development/index.ts";
import APIS from "@/apis";
import {ElMessage, ElMessageBox} from "element-plus";

const pageModelRef = ref()
const config = definePageModel<any>({
  url:APIS.DEVELOP_PROJECT_DEVELOPMENT_BASE,
  searchForm:{
    beforeSubmit(data) {
      if (data.endTime) {
        data.endTime += " 23:59:59"
      }
      return data
    },
    els:[
      {
        eType:"el-input",
        prop:"project",
        props:{
          placeholder:"项目编码/名称",
          clearable:true
        }
      },
      {
        eType: "el-select",
        prop: "developStatus",
        props: {
          placeholder: "开发状态",
          clearable: true
        },
        optionsData: {
          list: convertEnumToList(DevelopStatusEnum),
          label: "label",
          value: "value"
        }
      },
      {
        eType: "el-date-picker",
        prop: "startTime",
        props: {
          valueFormat: "YYYY-MM-DD",
          placeholder: "创建时间-起始",
          clearable: true
        }
      },
      {
        eType: "el-date-picker",
        prop: "endTime",
        props: {
          valueFormat: "YYYY-MM-DD",
          placeholder: "创建时间-结束",
          clearable: true
        }
      },
    ]
  },
  programForm:{
    els:[
      {
        label: "确认",
        eType: "el-button",
        props: {
          type: "primary"
        },
        event: "confirm-multi"
      },
      {
        label: "取消",
        eType: "el-button",
        props: {
          type: "primary"
        },
        event: "cancel-multi"
      },
    ]
  },
  table:{
    page:{
      enable:true,
      pageSize:20
    },
    selection:true,
    operation:{
      width:120,
      props:{
        fixed:"right"
      },
      els:[
        {
          eType: "el-button",
          label: "详情",
          event: "detail",
          props: {
            type: "primary",
            link: true
          }
        },
        {
          eType: "el-button",
          label: "开始",
          event: "start",
          props: {
            type: "primary",
            link: true
          }
        },
        {
          eType: "el-button",
          label: "完成",
          event: "finish",
          props: {
            type: "primary",
            link: true
          }
        },
      ]
    },
    props:{
      stripe:true,
      border:true
    },
    els:[
      {
        label:"项目编码",
        prop:"projectCode",
        minWidth:120,
      },
      {
        label:"项目名称",
        prop:"projectName",
        minWidth:120,
      },
      {
        label:"销售人员姓名",
        prop:"saleStaffName",
        minWidth:120,
      },
      {
        label:"开发状态",
        prop:"status",
        minWidth:120,
        renderFn(data) {
          return <span>{DevelopStatusEnum[data.developStatus]}</span>
        },
      },
      {
        label: "备注",
        prop: "remark",
        minWidth: 120
      },
      {
        label: "创建人姓名",
        prop: "createStaffName",
        minWidth: 120
      },

      {
        label: "创建时间",
        prop: "createTime",
        minWidth: 140,
        renderFn(data) {
          return <span>{data.createTime?.toDate()}</span>
        },
      },
    ]
  },
})

/**
 * 刷新
 */
const handleRefresh = (clear: boolean = false) => {
  pageModelRef.value.refreshTableData()
  clear && pageModelRef.value.clearSelection()
}

/**
 * 详情
 */
const developmentDetailRef = ref()
const handleDetail = (row: any) => {
  developmentDetailRef.value.show({
    id: row.projectId
  })
}


/**
 * 待开发 - 批量
 */
const handleConfirmMulti = async ()=>{
  const selectData = pageModelRef.value.getTableSelectData()
  if (!selectData){
    ElMessage.warning("情先选择一条数据")
    return false
  }
  const list = selectData.some((item: any) => item.developStatus !== DevelopStatusEnum['待确认']);
  if (list) {
    ElMessage.warning("只有待确认的项目才可以确认");
    return false;
  }
  await ElMessageBox.confirm("是否确认","确认",{
    type:"warning"
  })
  await processRequest.post('/api/DevelopProjectDevelopment/ConfirmMulti',{
    ids:selectData.map((item:any)=>item.id)
  })

  ElMessage.success("状态修改成功")
  handleRefresh()
}

/**
 * 开始 - 单选
 */
const handleStart = async (row: any) => {
  if (row.developStatus !== DevelopStatusEnum['待开发']) {
    ElMessage.warning("只有待开发的项目才可以完成");
    return false;
  }
  await ElMessageBox.confirm("是否确认开始?", "确认", {
    type: "warning"
  });
  await processRequest.post('/api/DevelopProjectDevelopment/Start', {
    id:row.id
  });
  ElMessage.success("状态修改成功");
  handleRefresh();
}

/**
 * 完成 - 单选
 */
const handleFinish = async (row: any) => {
  if (row.developStatus !== DevelopStatusEnum['开发中']) {
    ElMessage.warning("只有开发中的项目才可以完成");
    return false;
  }
  await ElMessageBox.confirm("是否确认开始开发?", "确认", {
    type: "warning"
  });
  await processRequest.post('/api/DevelopProjectDevelopment/Finish', {
    id: row.id
  });
  ElMessage.success("状态修改成功");
  handleRefresh();
}

/**
 * 取消 - 批量
 */
const handleCancelMulti = async ()=>{
  const selectData = pageModelRef.value.getTableSelectData()
  if (!selectData){
    ElMessage.warning("情先选择一条数据")
    return false
  }
  const list = selectData.some((item: any) => item.developStatus === DevelopStatusEnum['已完成'] || item.developStatus === DevelopStatusEnum['已取消']);
  if (list) {
    ElMessage.warning("只有不是已完成和已取消的项目才可以取消");
    return false;
  }
  await ElMessageBox.confirm("是否确认","确认",{
    type:"warning"
  })
  await processRequest.post('/api/DevelopProjectDevelopment/CancelMulti',{
    ids:selectData.map((item:any)=>item.id)
  })

  ElMessage.success("状态修改成功")
  handleRefresh()
}

</script>

<template>
  <div class="develop-project">
    <PageModel ref="pageModelRef" :PageModel="config" @detail="handleDetail" @confirm-multi="handleConfirmMulti"
               @start="handleStart" @finish="handleFinish" @cancel-multi="handleCancelMulti"/>
    <!-- 详情 -->
    <DevelopmentDetail ref="developmentDetailRef"/>
  </div>
</template>

<style scoped lang="scss">
.develop-project {
  flex: 1;
  display: flex;
  flex-direction: column;
}
</style>